<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>商品详情页-小米商城</title>
    <meta name="viewport" content="width=1226">
    <meta http-equiv="x-dns-prefetch-control" content="on">
    <link rel="shortcut icon" href="https://s01.mifile.cn/favicon.ico" type="image/x-icon">
    <script type="text/javascript" src="${pageContext.servletContext.contextPath}/st/front/JS/jquery.min.js"></script>
    <script type="text/javascript">
        function ajaxcomm(deid){
            //ajax页面加载好 显示
            $.get("${pageContext.servletContext.contextPath}/Comm_coll/"+deid,function (data){
                if(data=="已收藏"){
                    $(".btn-like").css("background-color","#fc924b");
                }
            },"text");
        }
        $(document).ready(function(){
            //页面加载好,第一个默认 active
            $(".a li:first-child").addClass("active");
            //显示价格/配置
            $(".hidden").eq(0).show();
            $(".jiage1:first-child").show();
            $(".sale-btn").eq(0).show();
            $(".favorite-btn").eq(0).show();
            var name=$("h2").html();
            var guige=$(".active").text();
            var jiage=$(".jiage1").html();
            // alert(jiage);
            $(".ms").html(name+guige);
            $(".total-price").html("总计:"+jiage);
            var deid=$(".oncik #deid").html();
            ajaxcomm(deid);
            //点击不同配置时,页面图片价格修改
            $(".oncik").click(function(){
                //获取点击得下标
                var a=$(this).index();
                //先隐藏所有 后显示点击元素
                $(".hidden").hide();
                $(".hidden").eq(a).show();
                $(".a .oncik").removeClass("active");
                $(".a .oncik").eq(a).addClass("active");
                //获取商品编号
                var deid=$(".oncik #deid").eq(a).html();
                $(".jiage1").hide();
                $(".jiage1").eq(a).show();
                $(".favorite-btn").hide();
                $(".favorite-btn").eq(a).show();
                $(".sale-btn").hide();
                $(".sale-btn").eq(a).show();
                var guige=$(".active").text();
                var jiage=$(".jiage1").eq(a).html();
                $(".ms").html(name+guige);
                $(".total-price").html("总计:"+jiage);
                $.get("${pageContext.servletContext.contextPath}/Comm_coll/"+deid,function (data){
                    if(data=="未登录"){

                    }else if(data=="已收藏"){
                        $(".btn-like").css("background-color","#fc924b");
                    }else{
                        $(".btn-like").css("background-color","#b0b0b0");
                    }
                },"text");
            });

            $(".btn-like").click(function (){
                //获取点击得下标
                var a=$(this).index();
                //获取商品编号
                var deid=$(".oncik #deid").eq(a).html();
                $.get("${pageContext.servletContext.contextPath}/addComm_coll/"+deid,function (data){
                    if(data=="nologin"){
                        $(".btn-like").attr("href","${pageContext.servletContext.contextPath}/front_login.jsp");
                    }else if(data=="success"){
                        $(".btn-like").css("background-color","#fc924b");
                    }else{
                        $(".btn-like").css("background-color","#b0b0b0");
                    }
                },"text");
            });
            });
    </script>
    <link href="${pageContext.servletContext.contextPath}/st/front/CSS/detail.0e1a7fff.css" rel="preload" as="style">
    <link href="${pageContext.servletContext.contextPath}/st/front/CSS/detail.0e1a7fff.css" rel="stylesheet">
</head>
<body id="stat_e3c9df7196008778">
<div id="app">
    <div>
        <jsp:include page="/Front_Head"></jsp:include>
    </div>
    <div>
        <div class="xm-product-box">
            <div class="nav-bar">
                <div class="container">
                    <h2>${commlist.comname}</h2>
                    <div class="con">
                        <div class="right">
                            <a class="J_contactBtn" href="javascript:void(0);">咨询客服
                            </a>
                            <span class="separator">|</span>
                            <a class="J_nav_comment " href="https://www.mi.com/comment/12609.html"
                               target="_blank">用户评价</a>
                            <a class="btn btn-small btn-primary J_nav_buy hide">立即购买</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="mi-detail">
        <div class="page" data-v-70283663="">
            <div class="page-box" data-v-70283663="">
                <div class="page-info" data-v-70283663="">
                    <div class="product-box container" data-v-70283663="">
                        <div class="img-left" data-v-70283663="">
                            <div class="product-imglist J_imgListBox" data-v-70283663="" data-v-7121d496="">
                                <div class="img-box J_imgList" data-v-7121d496="">
                                    <div class="swiper-container J_slider_imglist swiper-container-fade swiper-container-initialized swiper-container-horizontal"
                                         data-v-7121d496="">
                                        <!--商品图片-->

                                       <div class="swiper-wrapper clearfix" data-v-7121d496=""
                                            style="transition-duration: 0ms;">
                                            <c:forEach var="pictureList" items="${commlist.describesList}">
                                                <div class="hidden" data-swiper-slide-index="1"
                                                     data-v-7121d496=""
                                                     style="width: 560px;height: 560px">
                                                    <img
                                                            data-v-7121d496=""
                                                            src="${pageContext.servletContext.contextPath}/images/${pictureList.picture}">
                                                </div>
                                            </c:forEach>
                                     </div>
                                        <span aria-atomic="true" aria-live="assertive" class="swiper-notification"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="product-con" data-v-70283663="">
                            <h2 data-v-70283663="">
                                <img data-v-70283663="">${commlist.comname}
                            </h2>
                            <p class="sale-desc">
                                ${commlist.describe}
                            </p>
                            <div class="price-info" data-v-70283663="">
                                <c:forEach var="jiage" items="${commlist.describesList}">
                                    <span class="jiage1" style="display:none " data-v-70283663="">${jiage.depraice} 元</span>
                                </c:forEach>
                            </div>
                            <div class="line" data-v-70283663=""></div>
                            <div class="buy-option" data-v-6009d2b8="" data-v-70283663="">
                                <div class="buy-box-child" data-v-6009d2b8="">
                                    <div class="option-box" data-v-6009d2b8="">
                                        <div class="title" data-v-6009d2b8="">选择颜色+配置</div>
                                        <ul class="clearfix a" data-v-6009d2b8="">
                                            <c:forEach var="describes" items="${commlist.describesList}" varStatus="desta">
                                                <li class="oncik" data-v-6009d2b8="">
                                                    <a class="" data-v-6009d2b8="">${describes.config}<span id="deid" style="display: none">${describes.deid}</span></a>
                                                </li>
                                            </c:forEach>
                                        </ul>
                                    </div>
                                </div>
                                <div class="buy-box-child" data-v-6009d2b8="">
                                </div>

                            </div>
                            <div class="selected-list" data-v-70283663="" data-v-acfb37e4="">
                                <ul data-v-acfb37e4="">
                                    <!--li 名称+guige span 价格显示 -->
                                    <li data-v-acfb37e4="" class="ms">
                                        <span data-v-acfb37e4="" class="jg"></span>
                                    </li>
                                </ul>
                                <div class="total-price" data-v-acfb37e4=""></div>
                            </div>
                            <div class="btn-box" data-v-70283663="">
                                <c:forEach var="countlist" items="${commlist.describesList}">
                                    <c:if test="${countlist.count!=0}">
                                        <div class="sale-btn" data-v-381dda6a="" data-v-70283663="" style="display: none">
                                            <!--有货-->
                                            <a class="btn btn-line-primary" data-v-381dda6a="" href="${pageContext.servletContext.contextPath}/AddShoppCart/${countlist.deid}">加购物车</a>
                                        </div>
                                        <div class="favorite-btn" data-v-5d5a0502="" data-v-70283663="" style="display: none">
                                            <a class="btn-gray btn-like" data-v-5d5a0502="">
                                                <i class="iconfont default" data-v-5d5a0502=""></i>喜欢
                                            </a>
                                        </div>
                                    </c:if>
                                    <c:if test="${countlist.count==0}">
                                        <div class="sale-btn" data-v-381dda6a="" data-v-70283663="" style="display: none">
                                            <!--无货-->
                                            <a class="btn btn-line-primary" data-v-381dda6a="">到货通知</a>
                                        </div>
                                        <div class="favorite-btn" data-v-5d5a0502="" data-v-70283663="" style="display: none">
                                            <a class="btn-gray btn-like" data-v-5d5a0502="">
                                                <i class="iconfont default" data-v-5d5a0502=""></i>喜欢
                                            </a>
                                        </div>
                                    </c:if>
                                </c:forEach>
                            </div>
                            <div class="after-sale-info" data-v-6d9966ee="" data-v-70283663="">
                                <span data-v-6d9966ee="">
                                    <a class="support" data-v-6d9966ee="" href="javascript:void(0);">
                                      <i class="iconfont" data-v-6d9966ee=""></i>
                                        <em data-v-6d9966ee="">小米自营</em>
                                    </a>
                                </span>
                                <span data-v-6d9966ee="">
                                    <a class="support" data-v-6d9966ee="" href="javascript:void(0);" title="由小米发货">
                                        <i class="iconfont" data-v-6d9966ee=""></i>
                                        <em data-v-6d9966ee="">小米发货</em>
                                    </a>
                                </span>
                                <span data-v-6d9966ee="">
                                    <a class="support" data-v-6d9966ee="" href="javascript:void(0);">
                                        <i class="iconfont" data-v-6d9966ee=""></i>
                                        <em data-v-6d9966ee="">7天无理由退货</em>
                                    </a>
                                </span>
                                <span data-v-6d9966ee="">
                                    <a class="support" data-v-6d9966ee="" href="javascript:void(0);">
                                        <i class="iconfont" data-v-6d9966ee=""></i>
                                        <em data-v-6d9966ee="">运费说明</em>
                                    </a>
                                </span>
                                <span data-v-6d9966ee="">
                                    <a class="support" data-v-6d9966ee="" href="javascript:void(0);">
                                        <i class="iconfont" data-v-6d9966ee=""></i>
                                        <em data-v-6d9966ee="">企业信息</em>
                                    </a>
                                </span>
                                <span data-v-6d9966ee="">
                                    <a class="support" data-v-6d9966ee="" href="javascript:void(0);" target="_blank">
                                        <i class="iconfont" data-v-6d9966ee=""></i>
                                        <em data-v-6d9966ee="">售后服务政策</em>
                                    </a>
                                </span>
                                <span data-v-6d9966ee="">
                                    <a class="support" data-v-6d9966ee="" href="javascript:void(0);" target="_blank">
                                        <i class="iconfont" data-v-6d9966ee=""></i>
                                        <em data-v-6d9966ee="">7天价格保护</em>
                                    </a>
                                </span>
                            </div>
                        </div>
                    </div>
                    <!---->
                    <div class="product-detail page-main" data-v-70283663="" data-v-eb8da102="">
                        <!---->
                        <div class="detail-box" data-v-eb8da102="">
                            <div class="detail-item" data-v-eb8da102="">
                                <div class="section" data-v-eb8da102="">
                                    <div class="section-plain_view" data-v-eb8da102="">
                                        <div class="title container" data-v-eb8da102="">
                                            <h3 data-v-eb8da102="">价格说明</h3>
                                            <!---->
                                        </div>
                                        <div class="img-box" data-v-eb8da102="" style="height: 189px;">
                                            <img data-src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/a482afa34053b1b32ece1023475af7fb.jpeg"
                                                 data-v-eb8da102="" lazy="loading"
                                                 src="${pageContext.servletContext.contextPath}/images/a482afa34053b1b32ece1023475af7fb.jpeg">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <jsp:include page="tail.jsp"></jsp:include>
</div>
</body>
</html>
